import React, { Component } from 'react'
import './Item.css'
export default class Item extends Component {
  state = {
    isEdit: false, // 这个数据,用来决定Item组件中到底要渲染什么内容
    // false -> 渲染的就是复选框和任务名
    // true -> 渲染一个文本框

    todoName: '', //用来存储编辑任务时,用户输入的内容
  }
  // 修改功能
  handle = (e) => {
    // 要修改App组件中todoList数组中指定的某个对象的isDone
    // 要获取到被修改的数据的id
    const id = this.props.todo.id
    // 把id传递给App组件
    this.props.getTodoIdUpdate(id)
  }

  // 删除功能
  delHandle = () => {
    // 要删除的数据id
    const id = this.props.todo.id

    // 把id传递给App组件
    this.props.getTodoIdDel(id)
  }

  // 编辑按钮的事件处理函数
  editHandle = () => {
    // 只要修改isEdit的值,就可以让Item组件中解构和按钮的文本改变
    this.setState({
      isEdit: !this.state.isEdit,
      todoName: this.props.todo.todoName,
    })
  }
  // 编辑时,编辑文本框受控的change事件处理函数
  constrolHandle = (e) => {
    this.setState({
      todoName: e.target.value.trim(),
    })
  }
  // 编辑之后,按下回车键,修改任务名的事件处理函数
  editDoneHandle = (e) => {
    if (e.keyCode !== 13 || !e.target.value.trim()) return
    // debugger(断点) 代码执行到这里的时候会暂停
    // 把数据传递给App. id和todoName
    const id = this.props.todo.id
    const todoName = this.state.todoName
    // 调用app里面的函数,将要修改的数据id和新的任务名传递给App
    this.props.editTodoHandle(id, todoName)

    // 修改isEdit的值,恢复到展示复选框和任务名的状态
    this.setState({
      isEdit: false,
    })
  }
  render() {
    const { todo } = this.props
    const { isEdit, todoName } = this.state
    return (
      <li>
        {isEdit ? (
          <input
            type="text"
            value={todoName}
            onChange={this.constrolHandle}
            onKeyDown={this.editDoneHandle}
          />
        ) : (
          <label>
            <input
              type="checkbox"
              checked={todo.isDone}
              onChange={this.handle}
            />
            <span className={todo.isDone ? 'active' : ''}>{todo.todoName}</span>
          </label>
        )}
        <button className="btn btn-danger" onClick={this.delHandle}>
          删除
        </button>
        <button className="btn btn-edit" onClick={this.editHandle}>
          {isEdit ? '取消' : '编辑'}
        </button>
      </li>
    )
  }
}
